import React from 'react';

var datas = [
    {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
    {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
    {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
    {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
    {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
    {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];

/**
 * 具体数据项
 */
class DataItem extends React.Component {

    render() {
        let colorVal = "black";
        if (!this.props.data.stocked) {
            colorVal = "red";
        }
        return (<div style={{color: colorVal}}>&nbsp;&nbsp;{this.props.data.name} {this.props.data.price}</div>);
    }
}

/**
 * 分组项目
 */
class DateCategory extends React.Component {
    constructor(props) {
        super(props);
    }

    getItem(itemData) {
        let itemEl = null;
        if ((!this.props.searchParam.searchText
                || itemData.name.toUpperCase().indexOf(this.props.searchParam.searchText.toUpperCase()) !== -1)
            && (!this.props.searchParam.onlyStock || itemData.stocked)) {
            itemEl = <DataItem key={itemData.name} data={itemData}/>;
        }
        return itemEl;
    }

    render() {
        return (<div>
            <div style={{fontStyle: "italic", fontWeight: 600}}>{this.props.name}</div>
        {this.props.items.map(item => {
            return this.getItem(item);
        })}
    </div>);
    }
}

/**
 * 数据列表
 */
class DataTable extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        let searchParam = {
            onlyStock: this.props.onlyStock,//只显示库存
            searchText: this.props.searchText//查询字符串
        }
        return (<div style={{border: "1px solid blue"}}>
    <div style={{fontStyle: "bold"}}>&nbsp;&nbsp;名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价格</div>
        {this.props.dataCategorys.map(category => {
            return (<DateCategory key={category.name} name={category.name} items={category.items}
            searchParam={searchParam}/>);
        })}
    </div>);
    }
}

/**
 * 搜索框
 */
class SearchBar extends React.Component {
    constructor(props) {
        super(props);
    }

    search(e) {
        this.props.onSearch(e.target.value);
    }

    onlyStock(e) {
        this.props.onlyStock(e.target.checked);
    }

    render() {
        return (<div style={{border: "1px solid black"}}>
    <input type="text" placeholder="查询..." onChange={this.search.bind(this)}/>
        <br/>
        <input id="cbxStock" type="checkbox" onClick={this.onlyStock.bind(this)}/>
        <label htmlFor="cbxStock">只看有库存的商品</label>
            </div>);
    }
}

/**
 * 整个控件
 */
export default class FilterTable extends React.Component {
    constructor(props) {
        super(props);
        this.initData();
        this.state = {
            onlyStock: false,//只显示库存
            searchText: ""//查询字符串
        }
    }

    initData() {
        this.dataCategorys = [];
        let tmpCategory = {};
        datas.forEach((item, idx, ary) => {
            if (tmpCategory[item.category] == null) {
            tmpCategory[item.category] = [];
        }
        tmpCategory[item.category].push(item);
    })
        for (let category in tmpCategory) {
            this.dataCategorys.push({
                name: category.toString(),
                items: tmpCategory[category]
            })
        }
    }

    search(txt) {
        this.setState({
            searchText: txt
        });
    }

    onlyStock(flag) {
        this.setState({
            onlyStock: flag
        });
    }

    render() {
        return (<div style={{width: "200px", left: "200px"}}>
    <SearchBar onlyStock={this.onlyStock.bind(this)} onSearch={this.search.bind(this)}/>
        <DataTable dataCategorys={this.dataCategorys} onlyStock={this.state.onlyStock}
        searchText={this.state.searchText}/>
        </div>);
    }
}
